{% extends 'df_goods/gbase.html' %}
{% block head %}
    <script>
        function add_ok(count) {
            {#获取加入购物车按钮的绝对位置的top（距离上边位置）、left（距离左边的位置）#}
            let $add_x = $('#add_cart').offset().top;
            let $add_y = $('#add_cart').offset().left;

            {#获取右上购物车元素的绝对位置，之后要做动画，让购物车按钮飞一个方块去右上该位置#}
            let $to_x = $('#show_count').offset().top;
            let $to_y = $('#show_count').offset().left;

            {#在css里有设置好一个add_junp，我们只要改好位置设置就可以使用了，实现动画效果#}
            $('.add_jump').css({left: $add_y + 80, top: $add_x + 10, display: 'block'})
                .stop()
                .animate({left: $to_y + 7, top: $to_x + 7}, function () {
                    $('.add_jump').fadeOut(function () {
                        {#动画后购物车旁数字也要跟着购物车内添加的商品变化，商品总数count作为参数传入使用#}
                        $('#show_count').html(count);
                    })
                })
        }

        $(function () {
            $('.add').click(function () {
                let num = parseInt($('.num_show').val());
                num++;
                $('.num_show').val(num).blur();
            })

            $('.minus').click(function () {
                let num = parseInt($('.num_show').val());
                num--;
                $('.num_show').val(num).blur();
            })
            $('.num_show').blur(function () {
                var num = parseInt($(this).val());
                if (isNaN(num) || num <= 1) {
                    num = 1;
                }
                if (num >={{ g.gkucun }}) {
                    num = '{{ g.gkucun }}'
                }
                $(this).val(num);
                let price = parseFloat($('.show_pirze em').text());
                let total = price * num;
                {#toFixed保留2位小数#}
                $('.total em').html(total.toFixed(2) + '元')
            })

            $('#add_cart').click(function () {
                {#要使用购物车功能需要登录，使用先判断登陆与否#}
                $.get('/cart/add/', {'gid': '{{ g.id }}', 'count': $('.num_show').val()}, function (data) {
                    if (data.isLogin == 0) {
                        location.href = '/user/login/'
                    }
                    if (data.ok === 1) {
                        add_ok(data.count);
                    }
                })

            })
            $('#tag_comment').click(function () {
                $('#tag_detail').removeClass('active')
                $(this).addClass('active')
                $('#tab_detail').hide()
                $('#tab_comment').show()
            })
            $('#tag_detail').click(function () {
                $('#tag_comment').removeClass('active')
                $(this).addClass('active')
                $('#tab_detail').show()
                $('#tab_comment').hide()
            })
        })


    </script>
{% endblock %}



{% block nav %}
    <div class="breadcrumb">
        <a href="#">全部分类</a>
        <span>></span>
        <a href="{% url 'glist' g.gtype.id 1 0 %}">{{ g.gtype.ttitle }}</a>
        <span>></span>
        <a href="#">商品详情</a>
    </div>

    <div class="goods_detail_con clearfix">
        <div class="goods_detail_pic fl"><img src="/static/images/{{ g.gpic }}"></div>

        <div class="goods_detail_list fr">
            <h3>{{ g.gtitle }}</h3>
            <p>{{ g.gjianjie }}</p>
            <div class="prize_bar">
                <span class="show_pirze">¥<em>{{ g.gprice }}</em></span>
                <span class="show_unit">单  位：{{ g.gunit }}</span>
            </div>
            <div class="goods_num clearfix">
                <div class="num_name fl">数 量：</div>
                <div class="num_add fl">
                    <input type="text" class="num_show fl" value="1">
                    <a href="javascript:;" class="add fr">+</a>
                    <a href="javascript:;" class="minus fr">-</a>
                </div>
            </div>
            <div class="total">总价：<em>{{ g.gprice }}元</em></div>
            <div class="operate_btn">
                <a href="javascript:;" class="buy_btn">立即购买</a>
                <a href="javascript:;" class="add_cart" id="add_cart">加入购物车</a>
            </div>
        </div>
    </div>
{% endblock %}
{% block right %}


   <ul class="detail_tab clearfix">
        <li id='tag_detail' class="active">商品介绍</li>
        <li id="tag_comment">评论</li>
   </ul>

    <div class="tab_content" id="tab_detail">
        <dl>
            <dt>商品详情：</dt>
            <dd>{{ g.gcontent|safe }} </dd>
        </dl>
    </div>

    <div class="tab_content" id="tab_comment" style="display: none">
        <dl>
{#            {% for  in  %}#}
{#            <dt>评论时间：{{  }}&nbsp;&nbsp;用户名: {{  }}</dt>#}
{#            <dd>评论内容: {{  }} </dd>#}
{#            {% endfor %}#}
            

        </dl>
    </div>
    <div class="add_jump"></div>
{% endblock %}